<template>
  <BeTable
    ref="beTableRef"
    class="data-share-service-list"
    rowKey="id"
    :columns="columns"
    :pagination="{ pageSize: 15, current: 1 }"
    :rowSelection="rowSelection"
    :scroll="{ x: 1400 }"
    :formSetting="{ fields: searchFields }"
    :beforeFetch="beforeFetch"
    :api="getMaskTaskList"
  >
    <template #toolbar>
      <BeButton class="create-btn" type="primary" @click="addTaskConfig()">
        <BeIcon icon="local:add" />
        <span>新增任务配置</span>
      </BeButton>
      <BeButton class="delete-btn" :disabled="selectedRowKeys.length <= 0" type="primary" danger @click="handleBatchDelete()">批量删除</BeButton>
    </template>
    <!-- 自定义单元格内容 -->
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <div class="options-btns">
          <a-dropdown trigger="click">
            <BeButton type="link">更多</BeButton>
            <template #overlay>
              <a-menu @click="(e) => onOptionMenuClick(e, record)">
                <a-menu-item key="update">修改任务</a-menu-item>
                <a-menu-item key="delete" @click="handleDelete()">删除任务</a-menu-item>
                <a-menu-item key="monitoring">任务监控</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </template>
    </template>
  </BeTable>
</template>

<script lang="ts" setup>
import { dmsMaskCenterApi } from '@/api/dms-mask-center'
import { GetMaskTaskList } from '@/api/dms-mask-center/type'
import { FieldItem } from '@/components/basics/BeForm'
import { TableColumnsType } from 'ant-design-vue'
import dayjs from 'dayjs'
import Create from './Create.vue'
import TaskMonitoring from './TaskMonitoring.vue'

defineOptions({ name: 'DataShareServiceListCreate' })

// state
const beTableRef = ref()
const pageInj = inject<any>('page')
const selectedRowKeys = ref([]) // 选择的数据
const searchFields: FieldItem[] = [
  {
    label: '任务名称',
    prop: 'taskName',
    component: 'Input',
    componentProps: { placeholder: '请输入任务名称' }
  },
  {
    label: '工单号',
    prop: 'workCode',
    component: 'Input',
    componentProps: { placeholder: '请输入' }
  },
  {
    label: '状态',
    prop: 'taskStatusName',
    component: 'ApiSelect',
    componentProps: {
      placeholder: '请输入状态',
      options: [
        { label: '新建', value: 'CREATE' },
        { label: '完成', value: 'CLOSED' },
        { label: '执行中', value: 'WATERMARK' },
        { label: '等待执行', value: 'WAIT' },
        { label: '停止', value: 'STOP' }
      ]
    }
  },
  {
    label: '任务创建时间',
    prop: 'startTimeRange',
    component: 'RangePicker',
    componentProps: {
      showTime: true,
      format: 'YYYY-MM-DD HH:mm:ss'
    },
    ifShow: (model: any) => model.taskStatusName === 'CREATE'
  },
  {
    label: '水印内容',
    prop: 'watermark',
    component: 'Input',
    componentProps: { placeholder: '请输入' }
  },
  {
    label: '源资产',
    prop: 'sourceResourceName',
    component: 'Input',
    componentProps: {
      placeholder: '请输入源资产'
    }
  },
  {
    label: '目标资产',
    prop: 'targetResourceName',
    component: 'Input',
    componentProps: {
      placeholder: '请输入目标资产'
    }
  }
]

// 表格定义
const columns: TableColumnsType = [
  { title: '任务名称', dataIndex: 'name', align: 'center', fixed: 'left' },
  { title: '工单编号', dataIndex: 'id', align: 'center' },
  { title: '水印内容', dataIndex: 'watermarkType', align: 'center' },
  { title: '脱敏策略', dataIndex: 'strategyName', align: 'center' }, // 如果你后续提供该字段
  { title: '源资产', dataIndex: 'sourceResourceName', align: 'center' },
  { title: '目标资产', dataIndex: 'targetResourceName', align: 'center' },
  {
    title: '任务创建时间',
    dataIndex: 'startTme',
    align: 'center',
    width: 160,
    sorter: (a, b) => dayjs(a.startTme).valueOf() - dayjs(b.startTme).valueOf()
  },
  {
    title: '最后执行时间',
    dataIndex: 'endTime',
    align: 'center',
    width: 160,
    sorter: (a, b) => dayjs(a.endTime).valueOf() - dayjs(b.endTime).valueOf()
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    fixed: 'right',
    width: 100
  }
]

// 获取任务列表
const getMaskTaskList = async (params?: GetMaskTaskList) => {
  return dmsMaskCenterApi.getMaskTaskList({ data: { ...params, module: 'WATERMARK' } })
}

// 删除
const handleDelete = async () => {
  console.log('asdfsd')
  console.log(selectedRowKeys.value)
}

// 批量删除
const handleBatchDelete = async () => {
  console.log('asdfsd')
  console.log(selectedRowKeys.value)
}

// 搜索前参数处理
const beforeFetch = (params: any) => {
  if (params.startTimeRange) {
    if (params.startTimeRange[0]) params.startTime = dayjs(params.startTimeRange[0]).format('YYYY-MM-DD HH:mm:ss')
    if (params.startTimeRange[1]) params.endTime = dayjs(params.startTimeRange[0]).format('YYYY-MM-DD HH:mm:ss')
  }
  delete params.startTimeRange
  return params
}

const rowSelection = ref({
  selectedRowKeys: selectedRowKeys,
  onChange: (keys: (string | number)[], _selectedRows: any) => {
    selectedRowKeys.value = keys as any
  }
})

// 新增任务配置
const addTaskConfig = () => {
  pageInj?.addTab({ key: 'create', component: markRaw(Create), title: '新增任务配置', closable: true })
}

// 菜单项点击事件
const onOptionMenuClick = (data: any, record: any) => {
  // 任务监控
  if (data.key === 'monitoring') {
    pageInj?.addTab({ key: `taskMonitoring_${record.id}`, title: `任务监控:${record.taskName}`, props: { record }, component: markRaw(TaskMonitoring), closable: true })
  }
}
</script>
<style lang="scss" scoped>
.data-share-service-list {
  // padding: 0 20px;
  background-color: var(--color-white);
  .create-btn {
    display: flex;
    align-items: center;
    .svg-icon {
      margin-right: 5px;
      font-size: 18px;
      color: var(--color-white);
    }
  }
  .options-btns {
    display: flex;
    justify-content: center;
  }
}
</style>
